<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .container{
            margin: 100px auto;
            text-align: center;
            /*background: saddlebrown;*/
            width: 1200px;
        }
        form{
            text-align: left;
        }
        form span.button{
           width: 200px;
           /*background-color: burlywood;*/
           border: 1px solid silver;
           height: 40px;
           /*color: white;*/
           font-size: 14px;
           cursor: pointer;
           padding: 5px;
           border-radius: 30px;
         }
         .sucess{
           color: white;
           background-color: green;
         }
        form a{
            width: 200px;
            /*background-color: burlywood;*/
            border: 1px solid silver;
            height: 40px;
            /*color: white;*/
            font-size: 14px;
            cursor: pointer;
            padding: 5px;
            border-radius: 30px;
        }
    </style>
</head>
<body>
<div class="container" style="margin: 30px auto;text-align: left; ">
    <form id="form1">
        邮箱:  <input type="email" name="email"   >
        用户名:<input type="text"  name="username">
        成绩:  <input type="text"  name="score"    >
        <span class="button ">ajax发送通知邮件</span>
    </form>
</div>

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script>
    $(".button").click(function () {
        var formdata = $("#form1").serialize();
        console.log("formdata:",formdata)
        $.ajax({
            url: "http://api.jg.com/email/send",
            method: "post",
            data: formdata,
            success: function (res) {
                var  resjson=JSON.parse(res)
                console.log(res)
                console.log(formdata)
                console.log(resjson,resjson.code,res);

                if (resjson.code==200) {
                     $(".button").addClass("sucess")
                    $(".button").text(resjson.msg)
                    alert(res.msg)
                }
            },
           error:function (res) {
               console.log("error_res",res)
           }
        })
    })
</script>


<div class="container">
    <form id="form2" method="post" action="http://api.jg.com/email/send">
        邮箱:  <input type="email" name="email"   >
        用户名:<input type="text"  name="username">
        成绩：<input type="text"  name="score"    >
        验证码:  <input type="text"  name="code"    >
        <button>2表单POST发送邮件</button>
    </form>
</div>

<div class="container">
    <form id="form3" method="get" action="http://localhost/git/jg-g4/JG/application/api/view/api/notice.php">
        邮箱:  <input type="email" name="email"   >
        用户名:<input type="text"  name="username">
        成绩:  <input type="text"  name="score"    >
        <button>2表单GET发送邮件</button>
    </form>
</div>







<script>
    var loginform= document.getElementById("login")
    function check() {
        if (loginform.name.value==""|| loginform.pwd.value=="") {
            alert("不能为空")
            console.log("为空")
            return false
        }else {
            console.log("不为空")
            return true
        }
    }
</script>





</body>
</html>